<template>
    <L7MapWithGaode :mapOnloadCB="mapOnloadCB"></L7MapWithGaode>
</template>

<script lang="ts">
import {Scene, PointLayer} from '@antv/l7';
import {defineComponent, onMounted, ref} from "vue"
import L7MapWithGaode from "@/component/common/L7MapWithGaode.component.vue"

export default defineComponent({
    name: "L7.addText3",
    components: {L7MapWithGaode},
    setup() {

        const mapOnloadCB = (scene: Scene) => {
            scene.setZoomAndCenter(5, [110, 30])

            const fontFamily = 'iconfont';
            const fontPath = `${window.location.origin}/antv-test/data/font/font_2534097_fcae9o2mxbv.woff2`;
            scene.addFontFace(fontFamily, fontPath);
            scene.addIconFont('icon1', '&#xe6d4;');

            fetch(`${window.location.origin}/antv-test/data/70408903-80db-4278-a318-461604acb2df.json`)
                .then(res => res.json())
                .then(data => {
                    const pointLayer = new PointLayer({})
                        .source(data.list, {
                            parser: {
                                type: 'json',
                                x: 'j',
                                y: 'w'
                            }
                        })
                        .shape('icon', 'text')
                        .size(20)
                        .color('w', ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99'])
                        .style({
                            textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
                            padding: [0, 0], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
                            stroke: '#ffffff', // 描边颜色
                            fontFamily,
                            iconfont: true,
                            textAllowOverlap: true
                        });
                    scene.addLayer(pointLayer);
                })
        }

        return {
            mapOnloadCB
        }
    }
})
</script>

<style scoped>

</style>
